import 'package:expandable_text/expandable_text.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';
import 'package:life_service/color/hex.dart';
import 'package:life_service/utils/radian.dart';
import 'package:life_service/utils/styles.dart';

import 'controller.dart';

class HotelCommentPage extends GetView<HotelCommentController> {
  const HotelCommentPage({super.key});

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: controller.tabs.length,
      child: Scaffold(
        backgroundColor: Colors.white,
        body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverAppBar(
                backgroundColor: Colors.white,
                systemOverlayStyle: SystemUiOverlayStyle.dark,
                leadingWidth: 130,
                leading: TextButton(
                  onPressed: Get.back,
                  child: Text.rich(
                    TextSpan(
                      children: [
                        const WidgetSpan(
                          child: Icon(
                            CupertinoIcons.chevron_back,
                            size: 18,
                            color: Colors.black,
                          ),
                        ),
                        TextSpan(
                          text: ' 全部评论',
                          style: StylesUtils.customTextStyle(
                            fontSize: StylesUtils.fontSize16,
                            color: HexColor.color3333,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                elevation: 1,
                shadowColor: HexColor(HexColor.colorF2f2),
                pinned: true,
                forceElevated: innerBoxIsScrolled,
              ),
              SliverPadding(
                padding: EdgeInsets.only(
                  left: (Get.width - 334) / 2,
                  right: (Get.width - 334) / 2,
                  bottom: 15,
                ),
                sliver: SliverToBoxAdapter(
                  child: Container(
                    padding: const EdgeInsets.symmetric(horizontal: 10),
                    constraints:
                        const BoxConstraints.expand(width: 334, height: 91),
                    decoration: BoxDecoration(
                      color: HexColor.rgba(255, 98, 98, 0.0980392156862745),
                      borderRadius: BorderRadius.circular(8),
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: [
                        Column(
                          children: [
                            Container(
                              margin: const EdgeInsets.only(top: 10),
                              alignment: Alignment.centerLeft,
                              child: Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  Text(
                                    '5.0',
                                    style: StylesUtils.customTextStyle(
                                      fontSize: StylesUtils.fontSize36,
                                      fontWeight: FontWeight.w700,
                                      color: HexColor.color3333,
                                    ),
                                  ),
                                  Container(
                                    margin: const EdgeInsets.only(left: 8),
                                    constraints: const BoxConstraints.expand(
                                        width: 37, height: 24),
                                    decoration: BoxDecoration(
                                      gradient: LinearGradient(
                                        colors: [
                                          HexColor.rgba(255, 255, 0, 1),
                                          HexColor.rgba(255, 255, 0, 1),
                                          HexColor.rgba(255, 204, 102, 1),
                                          HexColor.rgba(255, 204, 102, 1),
                                        ],
                                        stops: const [0.0, 0.0, 1.0, 1.0],
                                        transform: GradientRotation(
                                          RadianUtils.radianToAngle(135),
                                        ),
                                      ),
                                    ),
                                    alignment: Alignment.center,
                                    child: Text(
                                      '超赞',
                                      style: StylesUtils.customTextStyle(
                                        fontSize: StylesUtils.fontSize12,
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            Container(
                              margin: const EdgeInsets.only(top: 10),
                              alignment: Alignment.centerLeft,
                              child: Wrap(
                                spacing: 2,
                                crossAxisAlignment: WrapCrossAlignment.center,
                                alignment: WrapAlignment.start,
                                children: [
                                  for (var i = 0; i < 5; i++)
                                    Icon(
                                      CupertinoIcons.star_fill,
                                      size: 15,
                                      color: HexColor(HexColor.colorFfc7),
                                    ),
                                ],
                              ),
                            ),
                          ],
                        ),
                        Expanded(
                          child: Padding(
                            padding: const EdgeInsets.only(left: 5),
                            child: Row(
                              children: [
                                Center(
                                  child: Container(
                                    height: 39,
                                    width: 2,
                                    color: HexColor(HexColor.colorFf62),
                                  ),
                                ),
                                Expanded(
                                  child: Container(
                                    margin: const EdgeInsets.only(left: 5),
                                    alignment: Alignment.center,
                                    child: SizedBox(
                                      width: 205,
                                      height: 36,
                                      child: Column(
                                        children: [
                                          Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.spaceBetween,
                                            children: [
                                              Text.rich(
                                                TextSpan(
                                                  children: [
                                                    TextSpan(
                                                        text: '卫生5.0 ',
                                                        style: StylesUtils
                                                            .customTextStyle(
                                                          fontSize: StylesUtils
                                                              .fontSize12,
                                                          color: HexColor
                                                              .color3333,
                                                        )),
                                                    WidgetSpan(
                                                        child: Container(
                                                          constraints:
                                                              const BoxConstraints
                                                                  .expand(
                                                                  width: 46,
                                                                  height: 6),
                                                          decoration:
                                                              BoxDecoration(
                                                            color: HexColor(
                                                                HexColor
                                                                    .colorFf62),
                                                            borderRadius:
                                                                BorderRadius
                                                                    .circular(
                                                                        3),
                                                          ),
                                                        ),
                                                        alignment:
                                                            PlaceholderAlignment
                                                                .middle),
                                                  ],
                                                ),
                                              ),
                                              Text.rich(
                                                TextSpan(
                                                  children: [
                                                    TextSpan(
                                                        text: '设置4.9 ',
                                                        style: StylesUtils
                                                            .customTextStyle(
                                                          fontSize: StylesUtils
                                                              .fontSize12,
                                                          color: HexColor
                                                              .color3333,
                                                        )),
                                                    WidgetSpan(
                                                        child: Container(
                                                          constraints:
                                                              const BoxConstraints
                                                                  .expand(
                                                                  width: 46,
                                                                  height: 6),
                                                          decoration:
                                                              BoxDecoration(
                                                            color: HexColor(
                                                                HexColor
                                                                    .colorFf62),
                                                            borderRadius:
                                                                BorderRadius
                                                                    .circular(
                                                                        3),
                                                          ),
                                                        ),
                                                        alignment:
                                                            PlaceholderAlignment
                                                                .middle),
                                                  ],
                                                ),
                                              ),
                                            ],
                                          ),
                                          Container(
                                            margin:
                                                const EdgeInsets.only(top: 10),
                                            child: Row(
                                              mainAxisAlignment:
                                                  MainAxisAlignment
                                                      .spaceBetween,
                                              children: [
                                                Text.rich(
                                                  TextSpan(
                                                    children: [
                                                      TextSpan(
                                                        text: '位置5.0 ',
                                                        style: StylesUtils
                                                            .customTextStyle(
                                                          fontSize: StylesUtils
                                                              .fontSize12,
                                                          color: HexColor
                                                              .color3333,
                                                        ),
                                                      ),
                                                      WidgetSpan(
                                                          child: Container(
                                                            constraints:
                                                                const BoxConstraints
                                                                    .expand(
                                                                    width: 46,
                                                                    height: 6),
                                                            decoration:
                                                                BoxDecoration(
                                                              color: HexColor(
                                                                  HexColor
                                                                      .colorFf62),
                                                              borderRadius:
                                                                  BorderRadius
                                                                      .circular(
                                                                          3),
                                                            ),
                                                          ),
                                                          alignment:
                                                              PlaceholderAlignment
                                                                  .middle),
                                                    ],
                                                  ),
                                                ),
                                                Text.rich(
                                                  TextSpan(
                                                    children: [
                                                      TextSpan(
                                                        text: '服务4.9 ',
                                                        style: StylesUtils
                                                            .customTextStyle(
                                                          fontSize: StylesUtils
                                                              .fontSize12,
                                                          color: HexColor
                                                              .color3333,
                                                        ),
                                                      ),
                                                      WidgetSpan(
                                                          child: Container(
                                                            constraints:
                                                                const BoxConstraints
                                                                    .expand(
                                                                    width: 46,
                                                                    height: 6),
                                                            decoration:
                                                                BoxDecoration(
                                                              color: HexColor(
                                                                  HexColor
                                                                      .colorFf62),
                                                              borderRadius:
                                                                  BorderRadius
                                                                      .circular(
                                                                          3),
                                                            ),
                                                          ),
                                                          alignment:
                                                              PlaceholderAlignment
                                                                  .middle),
                                                    ],
                                                  ),
                                                ),
                                              ],
                                            ),
                                          )
                                        ],
                                      ),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
              PinnedHeaderSliver(
                child: PreferredSize(
                  preferredSize: const Size.fromHeight(36),
                  child: Container(
                    color: Colors.white,
                    height: 36,
                    child: TabBar(
                      controller: controller.tabController,
                      isScrollable: false,
                      dividerHeight: 1,
                      dividerColor: HexColor(HexColor.colorF2f2),
                      labelPadding: EdgeInsets.zero,
                      indicatorPadding: const EdgeInsets.only(bottom: 5),
                      unselectedLabelStyle: StylesUtils.customTextStyle(
                        color: HexColor.color3333,
                        fontSize: StylesUtils.fontSize12,
                      ),
                      unselectedLabelColor: HexColor(HexColor.color3333),
                      labelStyle: StylesUtils.customTextStyle(
                        color: HexColor.colorFf62,
                        fontSize: StylesUtils.fontSize12,
                      ),
                      labelColor: HexColor(HexColor.colorFf62),
                      indicatorColor: HexColor(HexColor.colorFf62),
                      indicatorSize: TabBarIndicatorSize.label,
                      indicatorWeight: 3,
                      tabs: controller.tabs
                          .map(
                            (String name) => Tab(text: name),
                          )
                          .toList(),
                    ),
                  ),
                ),
              ),
            ];
          },
          body: TabBarView(
            controller: controller.tabController,
            children: controller.tabs
                .map(
                  (str) => CustomScrollView(
                    slivers: [
                      for (var i = 1; i < 20; i++)
                        SliverPadding(
                          padding: EdgeInsets.symmetric(
                              horizontal: (Get.width - 347) / 2),
                          sliver: SliverToBoxAdapter(
                            child: Container(
                              margin: const EdgeInsets.only(top: 20),
                              child: Column(
                                children: [
                                  SizedBox(
                                    height: 46,
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.start,
                                      crossAxisAlignment:
                                          CrossAxisAlignment.stretch,
                                      children: [
                                        const CircleAvatar(
                                          radius: 23,
                                          backgroundImage: NetworkImage(
                                              'https://img1.baidu.com/it/u=1653751609,236581088&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500'),
                                        ),
                                        Expanded(
                                          child: Padding(
                                            padding:
                                                const EdgeInsets.only(left: 10),
                                            child: Column(
                                              children: [
                                                Row(
                                                  mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .spaceBetween,
                                                  children: [
                                                    Text(
                                                      '1*****3',
                                                      style: StylesUtils
                                                          .customTextStyle(
                                                        color:
                                                            HexColor.color3333,
                                                        fontWeight:
                                                            FontWeight.w700,
                                                      ),
                                                    ),
                                                    Text(
                                                      '5.0',
                                                      style: StylesUtils
                                                          .customTextStyle(
                                                        color:
                                                            HexColor.color3333,
                                                        fontWeight:
                                                            FontWeight.w700,
                                                      ),
                                                    )
                                                  ],
                                                ),
                                                Container(
                                                  margin: const EdgeInsets.only(
                                                      top: 8),
                                                  child: Row(
                                                    mainAxisAlignment:
                                                        MainAxisAlignment
                                                            .spaceBetween,
                                                    children: [
                                                      Text(
                                                        '2018-10-15 评价',
                                                        style: StylesUtils
                                                            .customTextStyle(
                                                          fontSize: StylesUtils
                                                              .fontSize12,
                                                          color: HexColor
                                                              .color9999,
                                                        ),
                                                      ),
                                                      Wrap(
                                                        crossAxisAlignment:
                                                            WrapCrossAlignment
                                                                .center,
                                                        alignment:
                                                            WrapAlignment.end,
                                                        spacing: 3,
                                                        children: [
                                                          for (var i = 0;
                                                              i < 5;
                                                              i++)
                                                            Icon(
                                                              CupertinoIcons
                                                                  .star_fill,
                                                              size: 12,
                                                              color: HexColor(
                                                                  HexColor
                                                                      .colorFfc7),
                                                            ),
                                                        ],
                                                      )
                                                    ],
                                                  ),
                                                )
                                              ],
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                  Container(
                                    alignment: Alignment.centerLeft,
                                    margin: const EdgeInsets.symmetric(
                                        vertical: 15),
                                    child: Text(
                                      '房间很温馨，前台服务特别热情，位置也很好，离景区很近，距离火车站只要15分钟，下次出差还会来~',
                                      style: StylesUtils.customTextStyle(
                                        color: HexColor.color6666,
                                        lineHeight: 1.5,
                                      ),
                                    ),
                                  ),
                                  StaggeredGrid.count(
                                    crossAxisCount: 3,
                                    crossAxisSpacing: 10,
                                    children: [
                                      ClipRRect(
                                        borderRadius: BorderRadius.circular(5),
                                        child: Image.network(
                                          'https://img0.baidu.com/it/u=3547733589,2906244886&fm=253&fmt=auto&app=120&f=JPEG?w=570&h=380',
                                          height: 86,
                                          fit: BoxFit.fill,
                                        ),
                                      ),
                                      ClipRRect(
                                        borderRadius: BorderRadius.circular(5),
                                        child: Image.network(
                                          'https://img0.baidu.com/it/u=1036442731,425423974&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
                                          height: 86,
                                          fit: BoxFit.fill,
                                        ),
                                      ),
                                      ClipRRect(
                                        borderRadius: BorderRadius.circular(5),
                                        child: Image.network(
                                          'https://img2.baidu.com/it/u=2006560660,1269823070&fm=253&fmt=auto&app=138&f=JPEG?w=570&h=380',
                                          height: 86,
                                          fit: BoxFit.fill,
                                        ),
                                      ),
                                    ],
                                  ),
                                  Container(
                                    margin: const EdgeInsets.only(
                                        top: 10, bottom: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Text(
                                      '标准大床房（不含窗）',
                                      style: StylesUtils.customTextStyle(
                                        fontSize: StylesUtils.fontSize12,
                                        color: HexColor.colorFf62,
                                      ),
                                    ),
                                  ),
                                  Center(
                                    child: Container(
                                      width: 334,
                                      padding: const EdgeInsets.symmetric(
                                          vertical: 10, horizontal: 15),
                                      decoration: BoxDecoration(
                                        borderRadius: BorderRadius.circular(4),
                                        color: HexColor.rgba(
                                            255, 98, 98, 0.0470588235294118),
                                      ),
                                      alignment: Alignment.centerLeft,
                                      child: ExpandableText(
                                        prefixText: '酒店回复：',
                                        prefixStyle:
                                            StylesUtils.customTextStyle(
                                          fontWeight: FontWeight.w700,
                                          color: HexColor.color6666,
                                          lineHeight: 1.4,
                                        ),
                                        '亲爱顾客，您好，非常感谢您的好评，您的肯定是对我们最大安慰，期待您的亲爱顾客，您好，非常感谢您的好评，您的肯定是对我们最大安慰，期待您的...   ',
                                        expandText: '展开',
                                        collapseText: '收起',
                                        style: StylesUtils.customTextStyle(
                                            color: HexColor.color9999,
                                            fontSize: StylesUtils.fontSize12,
                                            lineHeight: 1.4),
                                        linkStyle: StylesUtils.customTextStyle(
                                          color: HexColor.color6666,
                                          fontSize: StylesUtils.fontSize12,
                                        ),
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ),
                    ],
                  ),
                )
                .toList(),
          ),
        ),
      ),
    );
  }
}
